<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('vip-condition-setting')" name="one" label="VIP条件设置">
        <condition-config v-show="activeTab === 'one'"></condition-config>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('vip-awards-setting')" name="two" label="VIP奖励设置">
        <award-config v-show="activeTab === 'two'"></award-config>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('vip-awards-record')" name="three" label="奖励发放记录">
        <give-award-log v-show="activeTab === 'three'"></give-award-log>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('vip-level-record')" name="four" label="VIP等级记录">
        <level-log v-show="activeTab === 'four'"></level-log>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { tabs } from '@/build';
import conditionConfig from './conditionConfig/conditionConfig';
import awardConfig from './awardConfig/awardConfig';
import giveAwardLog from './giveAwardLog/giveAwardLog';
import levelLog from './levelLog/levelLog';

export default {
  name: 'index',
  components: {
    conditionConfig, awardConfig, giveAwardLog, levelLog,
  },
  mixins: [tabs],
  data() {
    return {
      activeTab: 'one',
    };
  },
  mounted() {
    if (this.roleCheck('vip-condition-setting')) {
      this.activeTab = 'one';
    } else if (this.roleCheck('vip-awards-setting')) {
      this.activeTab = 'two';
    } else if (this.roleCheck('vip-awards-record')) {
      this.activeTab = 'three';
    } else if (this.roleCheck('vip-level-record')) {
      this.activeTab = 'four';
    }
  },
  methods: {
    changeTab(tabs) {
      this.activeTab = tabs.name;
    },
  },
};
</script>

<style scoped>

</style>
